/* 
拓展：HashRouter 和 BrowserRouter

  HashRouter  哈希路由
    http://localhost:3000/#/
    http://localhost:3000/#/list
    http://localhost:3000/#/list/1


  BrowserRouter 浏览器路由
    http://localhost:3000/
    http://localhost:3000/list
    http://localhost:3000/list/1

  现象：HashRouter  相对于 BrowserRouter 多了  #/。


  BrowserRouter 由于改变的是浏览器的路径，
  直接修改地址栏地址，会导致页面刷新，体验没那么好。

  单页面应用开发建议：
    1. 开发的时候最好使用 HashRouter 实现路由切换。
    2. 因为 #/xxx 是代表在当前页面中内部跳转，不刷新页面。
  
*/

import React from 'react';
import './App.css';
import { BrowserRouter, Route, Link, Redirect, Switch } from 'react-router-dom';


const Home = (props) => {
  console.log(props);
  return <div>
    <h1>这是首页</h1>
    {/* 打开新页面(组件) */}
    <button onClick={() => props.history.push('/list/1')}>直达某个详情页</button>
  </div>;
};

const List = (props) => {
  return (
    <div>
      <h1>列表页</h1>
      <ul>
        <li><Link to="/list/1">详情1</Link></li>
        <li><Link to="/list/2">详情2</Link></li>
      </ul>
    </div>
  );
};

const ListDetail = (props) => {
  console.log(props);
  return (
    <div>
      <h1>{props.match.params.id} 的详情页</h1>
      {/* 后退到上一页(组件) */}
      <button onClick={() => props.history.goBack()}>后退</button>
    </div>
  );
};

// 404 页面
const PageNotFound = () => <div>
  <h1>很抱歉，您要访问的页面不存在！</h1>
</div>;



class App extends React.Component {
  render() {
    return (
      <div className="App">
        <BrowserRouter>
          {/* 借鉴了原生 JS 的 switch 分支思想 */}
          <Switch>
            {/* 已经确定的情况写前面 */}
            <Route exact path="/" component={Home}></Route>
            <Route exact path="/index">
              <Redirect to='/'></Redirect>
            </Route>
            <Route exact path="/list" component={List}></Route>
            <Route path="/list/:id" component={ListDetail}></Route>
            {/* 其他情况，省略 path - 如果不是上面配置的，都显示 PageNotFound 组件 */}
            <Route exact component={PageNotFound}></Route>
          </Switch>
        </BrowserRouter>
      </div>
    );
  }
}

export default App;
